<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器 */
        h1 {
            color: skyblue;
            text-align: center;
        }

        /* 类选择器 */
        .coke {
            color: brown;
            font-size: 100px;
            text-align: center;
        }

        /* ID选择器 */
        #tz {
            color: red;
            font-size: 100px;
            text-align: center;
        }

        /* 通配选择器 */
        * {
            font-family: '宋体';
        }

        /* 属性选择器 */
        [alt] {
            width: 150px;
            height: 150px;
            display: block;
            margin: auto;
        }

        /* 标签选择器 */
        h2 {
            color: indianred;
        }

        /* 后代选择器 */
        ul li {
            font-size: 60px;
            color: gold;
        }

        /* 子代选择器 */
        div>p {
            color: red;
            font-size: 30px;
        }

        /* 相邻兄弟选择器 */
        span+p {
            color: blue;
            font-size: 20px;
        }

        /* 随后兄弟选择器 */
        .hobby~p {
            color: bisque;
            font-size: 30px;
        }

        /* 链接伪类 */
        a:link {
            color: red;
        }

        a:visited {
            color: orange;
        }

        a:hover {
            color: aquamarine;
        }

        a:active {
            color: green;
        }

        input:focus {
            color: rgb(255, 0, 119);
            background-color: yellow;
        }

        :root {
            background-color: rgb(120, 158, 193);
        }

        /* 盒子模型 */
        .box {
            width: 300px;
            height: 300px;
            /* 内边距 */
            padding: 10px 15px 20px 25px;
            /* 左边框 */
            border-left: 20px solid red;
            /* 上边框 */
            border-top: 15px double orange;
            /* 右边框 */
            border-right: 10px dashed pink;
            /* 下边框 */
            border-bottom: 5px dotted blue;
            /* 外边距 */
            margin: 5px 15px 20px 25px;
        }

        .box img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h1>选择器的类型</h1>
    <p class="coke">看我看我，我是用了类选择器。小猫老弟</p>
    <p id="tz">o.0</p>
    <img src="./photo/co.jpg" alt="小猫老弟">
    <h2>火影四大天王</h2>
    <ul>
        <li>小豪</li>
        <li>心安</li>
        <li>桐生</li>
        <li>洛鱼</li>
    </ul>
    <div>
        <p>我喜欢的歌手和组合</p>
        <p>YOASOBI</p>
        <p>Reol</p>
        <p>Aimer</p>
    </div>
    <br>
    <span>我的爱好</span>
    <p class="hobby">睡觉</p>
    <p>打游戏</p>
    <p>看番</p>
    <p>买自己喜欢的谷子</p>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <br>
    <input type="text">
    <div class="box">
        <img src="./photo/凸守.jpg" alt="凸守早苗">
    </div>
</body>

</html>